<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,h3,dl,dd{margin:0; font-size:12px;}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
.box{width:366px; height:290px; background:#f4fafb; margin:50px auto;}
.head{height:23px; background:url(img4/headBg.jpg)-repeat;}
.title{background:url(img4/titleBg.jpg) no-repeat 6px 4px; padding:5px 0 0 30px;}
.list{padding:13px 0 0 5px;}
.list li{height:78px; vertical-align:top;overflow:hidden;}/* 善于利用overlow */
.list li img{border:1px solid #c8c4d3; padding:2px; float:left;}/* display:inline-block在IE6下不兼容故不适用 */
.list li dl{width:246px; height:70px; padding-left:12px;float:left;}
.list li dt{line-height:22px; font-weight:bold;}
.list li dd{line-height:20px;}
</style>
</head>
<body>

<div class="box">
  <div class="head">
    <h3 class="title">外媒评论精选</h3>
  </div>
  <ul class="list">
    <li>
      <a href="#">
        <img src="img4/pic.jpg" />
        <dl>
          <dt>《加勒比海盗4》-商业味浓郁</dt>
          <dd>本期加勒比海盗讲述杰克船长受英王所托寻找不老泉，与他...[详细]</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="img4/pic.jpg" />
        <dl>
          <dt>《加勒比海盗4》-商业味浓郁</dt>
          <dd>本期加勒比海盗讲述杰克船长受英王所托寻找不老泉，与他...[详细]</dd>
        </dl>
      </a>
    <li>
      <a href="#">
        <img src="img4/pic.jpg" />
        <dl>
          <dt>《加勒比海盗4》-商业味浓郁</dt>
          <dd>本期加勒比海盗讲述杰克船长受英王所托寻找不老泉，与他...[详细]</dd>
        </dl>
      </a>
    </li>
  </ul>
</div>
</body>
</html>
